<template>
  <div>
    <el-col style="margin-bottom: 50px;">
      <el-button type="primary" @click="dialogVisible = true">新建车辆</el-button>
    </el-col>
    <el-table :row-style="rowStyle" :data="tableData" border>
      <el-table-column flxed="left" prop="realName" label="姓名" width="120"></el-table-column>
      <el-table-column prop="driveNo" label="驾驶证号" width="200"></el-table-column>
      <el-table-column label="驾驶证照片" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.driveImg" alt  class="imgName" @click="carImg(scope.row.driveImg)"/>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="150"></el-table-column>
      <el-table-column prop="carNo" label="车辆牌照" width="100"></el-table-column>
      <el-table-column label="车辆图片" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.carImg" alt class="imgName" @click="carImg(scope.row.carImg)"/>
        </template>
      </el-table-column>
      <el-table-column prop="maxNumber" label="车辆人数"></el-table-column>
      <el-table-column prop="routeList" label="车辆线路" width="130">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.routeList" :key="index">{{item}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="车辆状态">
        <template
          slot-scope="scope"
        >{{scope.row.state === 1 ? '暂停接单' : scope.row.state === 2 ? '未接单' : '工作中'}}</template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="320">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" size="mini" type="primary" icon="el-icon-search">查看</el-button>
          <el-button @click="changeClick(scope.row)" size="mini" type="warning" icon="el-icon-edit">编辑</el-button>
          <el-button @click="delCar(scope.row)" type="danger" size="small" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 50px;"
      :total="page.tatol">
    </el-pagination>
    <el-dialog title="新建车辆" :visible.sync="dialogVisible" width="90%">
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          真实姓名：
          <el-input v-model="newCar.realName" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="12">
          驾驶证号：
          <el-input v-model="newCar.driveNo" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          驾照照片：
          <input type="file" @change="upDataDriveImg($event)" ref="InputFile" name="files" />
        </el-col>
        <el-col :span="12">
          电话号码：
          <el-input v-model="newCar.phone" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆牌照：
          <el-input v-model="newCar.carNo" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="12">
          车辆图片：
          <input type="file" @change="upDataCarImg($event)" ref="InputFile" name="files" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆人数：
          <el-input v-model="newCar.maxNumber" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="9">
          车辆线路：
          <el-select v-model="carLine" placeholder="请选择">
            <el-option
              v-for="item in carRouteIdList"
              :key="item.id"
              :label="item.startCity + ' - ' + item.endCity"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="pushArray">添加</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆状态：
          <el-select v-model="newCar.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <ul>
            <li style="width:330px" v-for="(item,index) in carLineList" :key="index" >
              {{item}}
              <span @click="delItem(index)" style="cursor: pointer;float:right;color:red;">删除</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="haveNewCar">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看车辆" :visible.sync="watchCarFlag" width="70%">
      <el-row style="margin-top: 20px;padding-bottom: 10px;">
        <el-col :span="12">
          真实姓名：
          <span style="font-width: 700;font-size: 20px;text-indent: 4em;">{{watchCar.realName}}</span>
        </el-col>
        <el-col :span="12">
          驾驶证号：
          <span style="font-width: 700;font-size: 20px;text-indent: 4em;">{{watchCar.driveNo}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;padding-bottom: 10px;">
        <el-col :span="12">
          驾照照片：
          <img :src="watchCar.driveImg" alt style="width: 50px;height: 50px" />
        </el-col>

        <el-col :span="12">
          车辆图片：
          <img :src="watchCar.carImg" alt style="width: 50px;height: 50px" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;padding-bottom: 10px;">
        <el-col :span="12">
          车辆牌照：
          <span style="font-width: 700;font-size: 20px;text-indent: 4em;">{{watchCar.carNo}}</span>
        </el-col>
        <el-col :span="12">
          电话号码：
          <span style="font-width: 700;font-size: 20px;text-indent: 4em;">{{watchCar.phone}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;padding-bottom: 10px;">
        <el-col :span="12">
          车辆人数：
          <span
            style="font-width: 700;font-size: 20px;text-indent: 4em;"
          >{{watchCar.maxNumber}}</span>
        </el-col>
        <el-col :span="12">
          车辆线路：
          <ul>
            <li v-for="(item,index) in watchCar.routeList" :key="index">{{item}}</li>
          </ul>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;padding-bottom: 10px;">
        <el-col :span="12">
          车辆状态：
          <span
            style="font-width: 700;font-size: 20px;text-indent: 4em;"
          >{{watchCar.realName === 1 ? '暂停接单' : watchCar.realName === 2 ? '未接单' : '工作中'}}</span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="watchCarFlag = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑车辆" :visible.sync="changeCarFlag" width="90%">
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          真实姓名：
          <el-input v-model="changeCar.realName" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="12">
          驾驶证号：
          <el-input v-model="changeCar.driveNo" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          驾照照片：
          <input type="file" @change="upDataDriveImg($event)" ref="InputFile" name="files" :placeholder="changeCar.driveImg" />
          <img :src="changeCar.driveImg" alt="" width="50px" height="50px">
        </el-col>
        <el-col :span="12">
          电话号码：
          <el-input v-model="changeCar.phone" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆牌照：
          <el-input v-model="changeCar.carNo" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="12">
          车辆图片：
          <input type="file" @change="upDataCarImg($event)" ref="InputFile" name="files" :placeholder="changeCar.carImg" />
          <img :src="changeCar.carImg" alt="" width="50px" height="50px">
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆人数：
          <el-input v-model="changeCar.maxNumber" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="9">
          车辆线路：
          <el-select v-model="carLine" placeholder="请选择">
            <el-option
              v-for="item in carRouteIdList"
              :key="item.id"
              :label="item.startCity + ' - ' + item.endCity"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="pushChange">添加</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          车辆状态：
          <el-select v-model="changeCar.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <ul>
            <li style="width: 330px" v-for="(item,index) in changeCar.routeList" :key="index">
              {{item}}
              <span @click="delItem1(index)" style="cursor: pointer;float:right;color:red;">删除</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeCarMsg">修改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="图片展示"
      :visible.sync="imgUrlFlag"
      center
      width="80%">
      <div style="text-align: center;">
        <img :src="showImg" alt="" style="width: 100%">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  methods: {
    handleClick (row) {
      this.watchCar = row
      this.watchCarFlag = true
    },
    changeClick (row) {
      this.changeCarFlag = true
      this.changeCar = row
      this.changeCar.routeIdList = []
      for (let i = 0; i < this.carRouteIdList.length; i++) {
        for (let j = 0; j < row.routeList.length; j++) {
          console.log(row.routeList[j])
          var temp = row.routeList[j].split('--')
          if (
            temp[0] === this.carRouteIdList[i].startCity &&
            temp[1] === this.carRouteIdList[i].endCity
          ) {
            this.changeCar.routeIdList.push(this.carRouteIdList[i].id)
            // console.log(123)
            console.log(this.changeCar.routeIdList)
          }
        }
      }
    },
    upDataDriveImg (event) {
      var reader = new FileReader()
      let fileData = this.$refs.InputFile.files[0]
      reader.readAsDataURL(fileData)
      let _this = this
      reader.onload = function (e) {
        // 这里的数据可以使本地图片显示到页面
        _this.addimg = e.srcElement.result
      }
      // 使用formapi打包
      let formData = new FormData()
      formData.append('file', fileData)
      request({
        url: '/resources/uploadImg',
        method: 'post',
        data: formData
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.newCar.driveImg = res.data
          this.changeCar.driveImg = res.data
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    upDataCarImg (event) {
      var reader = new FileReader()
      let fileData = this.$refs.InputFile.files[0]
      reader.readAsDataURL(fileData)
      let _this = this
      reader.onload = function (e) {
        // 这里的数据可以使本地图片显示到页面
        _this.addimg = e.srcElement.result
      }
      // 使用formapi打包
      let formData = new FormData()
      formData.append('file', fileData)
      request({
        url: '/resources/uploadImg',
        method: 'post',
        data: formData
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.newCar.carImg = res.data
          this.changeCar.carImg = res.data
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    haveNewCar () {
      console.log(this.newCar)
      if (!this.newCar.carImg) {
        this.errorMsg()
        return
      }
      if (this.newCar.routeIdList.length === 0) {
        this.errorMsg()
        return
      }
      if (!this.newCar.state) {
        this.errorMsg()
        return
      }
      if (!this.newCar.realName) {
        this.errorMsg()
        return
      }
      if (!this.newCar.maxNumber) {
        this.errorMsg()
        return
      }
      if (!this.newCar.driveNo) {
        this.errorMsg()
        return
      }
      if (!this.newCar.driveImg) {
        this.errorMsg()
        return
      }
      if (!this.newCar.carNo) {
        this.errorMsg()
        return
      }
      request({
        url: '/car/insert',
        method: 'post',
        data: this.newCar
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.dialogVisible = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    pushArray () {
      if (!this.carLine) {
        this.errorMsg()
        return
      }
      for (let j = 0; j < this.newCar.routeIdList.length; j++) {
        if (this.carLine === this.newCar.routeIdList[j]) {
          Message({
            message: '已存在线路！',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
      }
      for (let i = 0; i < this.carRouteIdList.length; i++) {
        if (this.carLine === this.carRouteIdList[i].id) {
          this.carLineList.push(
            this.carRouteIdList[i].startCity +
              ' - ' +
              this.carRouteIdList[i].endCity
          )
        }
      }
      this.newCar.routeIdList.push(this.carLine)
      this.carLine = ''
    },
    errorMsg () {
      Message({
        message: '请填写完整！',
        type: 'error',
        duration: 5 * 1000
      })
    },
    changeCarMsg () {
      console.log(this.changeCar)
      if (!this.changeCar.carImg) {
        this.errorMsg()
        return
      }
      if (this.changeCar.routeIdList.length === 0) {
        this.errorMsg()
        return
      }
      if (!this.changeCar.state) {
        this.errorMsg()
        return
      }
      if (!this.changeCar.realName) {
        this.errorMsg()
        return
      }
      if (this.changeCar.maxNumber === '') {
        this.errorMsg()
        return
      }
      if (!this.changeCar.driveNo) {
        this.errorMsg()
        return
      }
      if (!this.changeCar.driveImg) {
        this.errorMsg()
        return
      }
      if (!this.changeCar.carNo) {
        this.errorMsg()
        return
      }
      request({
        url: '/car/update',
        method: 'post',
        data: {
          carImg: this.changeCar.carImg,
          carNo: this.changeCar.carNo,
          driveImg: this.changeCar.driveImg,
          driveNo: this.changeCar.driveNo,
          id: this.changeCar.id,
          isDelete: 0,
          maxNumber: this.changeCar.maxNumber,
          realName: this.changeCar.realName,
          routeIdList: this.changeCar.routeIdList,
          state: this.changeCar.state,
          phone: this.changeCar.phone
        }
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.changeCarFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    pushChange () {
      console.log(this.changeCar)
      if (!this.carLine) {
        this.errorMsg()
        return
      }
      for (let j = 0; j < this.changeCar.routeIdList.length; j++) {
        if (this.carLine === this.changeCar.routeIdList[j]) {
          Message({
            message: '已存在线路！',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
      }
      for (let i = 0; i < this.carRouteIdList.length; i++) {
        if (this.carLine === this.carRouteIdList[i].id) {
          this.changeCar.routeList.push(
            this.carRouteIdList[i].startCity +
              ' - ' +
              this.carRouteIdList[i].endCity
          )
        }
      }
      this.changeCar.routeIdList.push(this.carLine)
      this.carLine = ''
    },
    search () {
      request({
        url: '/car/findPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          isDelete: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.search()
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    delItem (index) {
      this.carLineList.splice(index, 1)
      this.newCar.routeIdList.splice(index, 1)
    },
    delItem1 (index) {
      this.changeCar.routeList.splice(index, 1)
      this.changeCar.routeIdList.splice(index, 1)
    },
    carImg (imgUrl) {
      // console.log(123)
      this.showImg = imgUrl
      this.imgUrlFlag = true
    },
    delCar (row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/car/update',
            method: 'post',
            data: {
              carImg: row.carImg,
              carNo: row.carNo,
              driveImg: row.driveImg,
              driveNo: row.driveNo,
              id: row.id,
              isDelete: 1,
              maxNumber: row.maxNumber,
              realName: row.realName,
              routeIdList: row.routeIdList,
              state: row.state,
              phone: row.phone
            }
          }).then(res => {
            if (res.code === '00000000') {
              Message({
                message: res.message,
                type: 'success',
                duration: 2000
              })
              this.search()
            } else {
              Message({
                message: res.message,
                type: 'error',
                duration: 5 * 1000
              })
            }
          })
        })
        .catch(_ => {})
    }
  },

  data () {
    return {
      tableData: [],
      dialogVisible: false,
      newCar: {
        carImg: '',
        carNo: '',
        driveImg: '',
        driveNo: '',
        maxNumber: '',
        realName: '',
        routeIdList: [],
        state: ''
      },
      options: [
        {
          value: '1',
          label: '暂停接单'
        },
        {
          value: '2',
          label: '未接单'
        },
        {
          value: '3',
          label: '工作中'
        }
      ],
      carRouteIdList: [],
      carLine: '',
      carLineList: [],
      watchCar: {},
      watchCarFlag: false,
      changeCarFlag: false,
      changeCar: {},
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      showImg: '',
      imgUrlFlag: false
    }
  },
  watch: {
    dialogVisible (value) {
      if (!value) {
        this.newCar = {
          carImg: '',
          carNo: '',
          driveImg: '',
          driveNo: '',
          maxNumber: '',
          realName: '',
          routeIdList: [],
          state: ''
        }
        this.carLine = ''
        this.carLineList = []
      }
      this.search()
    },
    changeCarFlag (value) {
      if (!value) {
        this.changeCar = {}
        this.carLine = ''
        this.carLineList = []
      }
      this.search()
    }
  },
  created () {
    request({
      url: '/route/findPage',
      method: 'get',
      params: {
        pageNo: 1,
        pageSize: 200
      }
    }).then(res => {
      if (res.code === '00000000') {
        // this.msg = res.data
        // console.log(res.data.data)
        this.carRouteIdList = res.data.data
      }
    })
    this.search()
  }
}
</script>

<style lang='less'>
.el-dialog__footer {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.imgName {
  width: 100%;
  height: 50px;
}
</style>
